<template>
  <view class="cart">
    <!-- 1 购物车列表 -->
    <view class="cart-list">
      <view
        class="cart-item"
        v-for="(item, index) in cartList"
        :key="item.goods_id"
      >
        <!-- 复选框 -->
        <view class="chk">
          <u-checkbox
            :value="item.checked"
            active-color="red"
            size="30"
            shape="circle"
            @change="handleItemCheck(index)"
          ></u-checkbox>
        </view>
        <!-- 图片 -->
        <view class="cart-img">
          <u-image
            width="190rpx"
            height="190rpx"
            :src="item.goods_small_logo"
          ></u-image>
        </view>
        <!-- 商品信息 -->
        <view class="cart-info">
          <view class="goods-name u-line-2">{{ item.goods_name }}</view>
          <view class="goods-tool">
            <view class="goods-price">￥{{ item.goods_price }}</view>
            <view class="goods-num-change">
              <view class="num-btn" @click="handleNumChange(index, -1)">-</view>
              <view class="num-value">{{ item.num }}</view>
              <view class="num-btn" @click="handleNumChange(index, +1)">+</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 2 统计栏结构 -->
    <view class="statistics">
      <!-- 全选 -->
      <view class="allchk">
        <u-checkbox
          :value="isAllChecked"
          active-color="red"
          size="30"
          shape="circle"
          @change="handleAllCheck"
          >全选</u-checkbox
        >
      </view>
      <!-- 合计 -->
      <view class="total">
        合计：
        <text class="rmb">￥</text>
        <text class="total-price">{{ totalPrice }}</text>
      </view>
      <!-- 购买按钮 -->
      <u-button
        type="error"
        :custom-style="{
          fontSize: '26rpx',
          width: '220rpx',
          height: '52rpx',
          borderRadius: '26rpx',
        }"
        @click="btnclosu"
        >去结算({{ totalCount }})</u-button
      >
    </view>
  </view>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  computed: {
    ...mapState(["cartList"]),
    ...mapGetters([
      "checkedCartList",
      "isAllChecked",
      "totalPrice",
      "totalCount",
    ]),
  },
  methods: {
    // 点击跳转去结算
    btnclosu() {
      if (this.totalCount > 0) {
        uni.navigateTo({ url: "/pages/pay/pay" });
      } else {
        uni.showToast({
          title: "请选择商品哦",
          icon: "none",
        });
      }
    },

    // 选中的功能
    handleItemCheck(index) {
      /* 
     1 获取到想要修改的元素的索引
     2 获取购物车数组
     3 数组[索引].checked=!数组[索引].checked;
     4 把数组 设置回mutations中即可
      */

      const cartList = [...this.cartList]; // 1,2
      cartList[index].checked = !cartList[index].checked; // 3
      this.$store.commit("setCartList", cartList); // 4
    },

    // 编辑商品的数量
    async handleNumChange(index, unit) {
      /* 
     1 获取到想要修改的元素的索引
     2 获取购物车数组
     3 数组[索引].num+=unit;
     4 把数组 设置回mutations中即可

    5 额外处理
      1 数量== 1  而且用户点击 "-"  弹出一个确认框 询问用户是否要删除
        1 确定 执行删除
        2 点击否  什么都不做 
      2 

      */
      const cartList = [...this.cartList]; // 2
      if (cartList[index].num === 1 && unit === -1) {
        // 提示是否删除该商品
        const [err, result] = await uni.showModal({
          title: "提示",
          content: "憋删除啊",
        });
        // 判定是否删除
        if (result.confirm) {
          cartList.splice(index, 1);
          this.$store.commit("setCartList", cartList); // 4
        }
      } else {
        cartList[index].num += unit; // 3
        this.$store.commit("setCartList", cartList); // 4
      }
    },

    // 全选按钮，主动选中
    handleAllCheck() {
      /* 
      1 获取当前的全选状态  
      2 取反 
      3 把取反后的值 写到数组中每一个元素中 来修改他们 checked
      6 把数组 设置回mutations中即可
       */
      const isAllChecked = !this.isAllChecked;
      const cartList = [...this.cartList];
      cartList.forEach((goods) => (goods.checked = isAllChecked));
      this.$store.commit("setCartList", cartList);
    },
  },
};
</script>

<style lang="scss" >
.cart {
  padding-bottom: 83rpx;
  .cart-list {
    .cart-item {
      padding: 20rpx;
      display: flex;

      .chk {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cart-img {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cart-info {
        flex: 3;
        margin-left: 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .goods-tool {
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: $globalColor;
          }

          .goods-num-change {
            display: flex;
            color: #666;
            .num-btn {
              width: 36rpx;
              height: 36rpx;
              border: 1rpx solid #666;
              border-radius: 50%;

              display: flex;
              align-items: center;
              justify-content: center;
            }

            .num-value {
              margin: 0 20rpx;
            }
          }
        }
      }
    }
  }

  .statistics {
    height: 83rpx;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    border-top: 1rpx solid #ccc;
    display: flex;
    padding: 0 10rpx;
    align-items: center;
    background-color: #fff;

    .all-chk {
      padding: 0 10rpx;
    }

    .total {
      flex: 1;
      .rmb {
        color: $globalColor;
        font-size: 20rpx;
      }

      .total-price {
        color: $globalColor;
      }
    }
  }
}
</style>
